import { StackNavigator, TabNavigator } from 'react-navigation';
import React, { Component } from 'react';
import { TextInput, Button, Picker, Platform,Dimensions, StyleSheet, Text, View, Image, TouchableHighlight, ScrollView, ViewPagerAndroid, FlatList } from 'react-native';
import DatePicker from 'react-native-datepicker';
import NetUtils from './NetUtils';
var {width, height} = Dimensions.get('window');
import Storage from 'react-native-storage';
import { AsyncStorage } from 'react-native';
import storage from './LoginPage'
var username;
var password;
var url = 'http://119.29.13.173:8000/api';
var opts ={};
global.storage.load({key:'token'}).then(ret=>{
    username = ret.username;
    password = ret.password;
});
class NewGoalScreen extends React.Component {
    constructor(props) {
        super(props);
        //if(this.props.navigation.state.params.info === '0') {
        //	var curDate = new Date();
        //	var endDate = new Date();
        //	endDate.setDate(curDate.getDate()+7);
        //}
        //else {
        var curDate = new Date();
        var endDate = new Date();
        endDate.setDate(curDate.getDate() + 7);
        //}
        this.state = {
        	t1:'',
        	t2:'',
        	t3:'',
            goalSize: "small",
            goalType: "health",
            last: 7,
            stepCount: 1,
            frequency: 1,
            strTime: curDate,
            endTime: endDate,
            date: curDate.getFullYear().toString() + "-" + (curDate.getMonth() + 1).toString() + "-" + curDate.getDate().toString(),
            goalName: "",
            step: [{
                no: 1,
                last: 7,
                goalName: '',
                goalContent: '',
                frequency: 1,
                strTime: curDate,
                endTime: endDate,
            }, ],

        };
    }

    static navigationOptions = {
        headerStyle: {
            backgroundColor: '#2196F7',
        },
        headerTintColor: 'white',
    };


    onSummit = () =>{
    	
    	var valid = true;
    	opts.username = username;
    	opts.goalType = this.state.goalType;
    	opts.goalTitle = this.state.goalName;
    	if (opts.goalTitle === '')
    	{
    		valid = false;
    	}
    	opts.days = this.state.last;
    	opts.beginDate = this.getDateFormat(this.state.strTime);
        opts.endDate = this.getDateFormat(this.state.endTime);
        opts.subTaskList = [];
        for (var i in this.state.step)
        {
        	opts.subTaskList.push({
        	        			step:this.state.step[i].no,
        	        			days:this.state.step[i].last,
        	        			taskTitle:this.state.step[i].goalName,
        	        			taskContent: this.state.step[i].goalContent,
        	        			frequency:this.state.step[i].frequency,
        	        			beginDate:this.getDateFormat(this.state.step[i].strTime),
        	        			endDate:this.getDateFormat(this.state.step[i].endTime),
        	        		});
        	if (this.state.step[i].goalName === '' || this.state.step[i].goalContent === '')
    	{
    		valid = false;
    		break;
    	}
        }
        if (valid)
        {
        	var service = 'new_goal';
         NetUtils.post(url, service, opts, (data) => {});
        alert("建立新目标！");
        const {navigate} = this.props.navigation;
        navigate('Main');
        }
        else {
        	alert('可能存在空值!');
        }
    };

    getDateFormat = (dates)=>{
    	
        var space = "-";
        var years = dates.getFullYear();
        var months = dates.getMonth()+1;
        if(months<10){
            months = "0"+months;
        }

        let d = dates.getDate();
        if( d < 10){
            d = "0"+ d;
        };
        var time = years+space+months+space+d;
        return time;
        
    };


    render() {
        //小目标阶段页面
        var smallGoalStepPage = (
        <View style={{
            flex: 1
        }}>
	            <View style ={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
            flex:1,
        }}>
				<Picker
        style={{
            backgroundColor: "#eee",
            color: "#7f7f7f",
            height: 40,
            width: 100,
            flex:1,
        }}
        mode="dropdown"
        selectedValue={this.state.frequency}
        onValueChange={(fre) => this.setState({
            frequency: fre
        })}>
						  <Picker.Item label="每天" value="1" />
						  <Picker.Item label="每两天" value="2" />
						  <Picker.Item label="每三天" value="3" />
						  <Picker.Item label="每五天" value="5" />
						  <Picker.Item label="每周" value="7" />
						  <Picker.Item label="每半月" value="15" />
						  <Picker.Item label="每月" value="30" />
						</Picker>
						<TextInput
        keyboardType = "default"
        underlineColorAndroid="transparent"
        placeholder="输入目标内容"
        style={{
        	flex:1,
            height: 40,
            borderColor: '#ddd',
            borderWidth: 1,
            backgroundColor: 'white',
            width: 200,
            height: 40,
            margin: 5,
        }}
        onChangeText={(text) => {let step = this.state.step;
        			step[0].goalContent = text;
        			step[0].goalName = text;
        			this.setState({
                    goalName: text,
                    step:step})}}
        value={this.state.goalName}
        />
				</View>
	            <View style ={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
            flex:1,
        }}>
				<Text style ={styles.labelText}>持续</Text>
					<Picker
        style={{
            backgroundColor: "#eee",
            color: "#7f7f7f",
            width: 200,
            height: 40,
            margin: 10,
        }}
        mode="dropdown"
        selectedValue={this.state.last}
        onValueChange={(l) => {
            let ed = new Date();
            ed.setDate(this.state.strTime.getDate() + l);
            let step = this.state.step;
            step[0].last = l;
            this.setState({
                last: l,
                endTime: ed,
                step:step,
            })
        }}>
							  <Picker.Item label="一周" value={7} />
							  <Picker.Item label="21天" value={21} />
							  <Picker.Item label="一月" value={30} />
							  <Picker.Item label="三个月" value={90} />
							  <Picker.Item label="一年" value={365} />
							  <Picker.Item label="两年" value={730} />
							  <Picker.Item label="三年" value={1095} />
					</Picker>
				</View>
				<View style ={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
            flex:1,
        }}>
        <View style ={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
            flex:1,
        }}>
				<Text style ={styles.labelText}>起</Text>
					<DatePicker
        style={{
            height: 40,
            width: 100,
            margin:5,
        }}
        date={this.state.date}
        showIcon={false}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        minDate={this.state.date}
        maxDate={(this.state.strTime.getFullYear() + 1).toString() + "-" + (this.state.strTime.getMonth() + 1).toString() + "-" + this.state.strTime.getDate().toString()}
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
            dateInput: {
                backgroundColor: "white"
            }
        }}
        onDateChange={(date) => {
            let d = date.split("-");
            let dd = new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]));
            let ed = new Date();
            let step = this.state.step;
            step[0].strTime = dd;
            step[0].endTime =ed;
            ed.setDate(dd.getDate() + this.state.last);
            this.setState({
                date: date,
                strTime: dd,
                endTime: ed,
                step:step,
            });
        }}
        />
        </View>
        <View style ={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
            flex:1,
        }}>
		      		<Text style ={styles.labelText}>止</Text>
		      		<DatePicker
        style={{
            height: 40,
            width: 100,
            margin:5,
        }}
        date={(this.state.endTime.getFullYear()).toString() + "-" + (this.state.endTime.getMonth() + 1).toString() + "-" + this.state.endTime.getDate().toString()}
        showIcon={false}
        mode="date"
        placeholder="select date"
        format="YYYY-MM-DD"
        minDate={(this.state.endTime.getFullYear()).toString() + "-" + (this.state.endTime.getMonth() + 1).toString() + "-" + this.state.endTime.getDate().toString()}
        maxDate={(this.state.endTime.getFullYear() + 5).toString() + "-" + (this.state.endTime.getMonth() + 1).toString() + "-" + this.state.endTime.getDate().toString()}
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        customStyles={{
            dateInput: {
                backgroundColor: "white"
            }
        }}
        onDateChange={(date) => {
            let d = date.split("-");
            let dd = new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]));
            this.setState({
                endTime: dd
            });
        }}
        />
				</View>
					 </View>
		      		<Picker
        style={{
            backgroundColor: "#eee",
            color: "#7f7f7f",
            width: 200,
            height: 40,
            margin: 20,
            alignSelf:'center',
        }}
        mode="dropdown"
        placeholder="--选择预设任务方案--"
        onValueChange={(l) => {
            let ed = new Date();
            ed.setDate(this.state.strTime.getDate() + l);
            this.setState({
                last: l,
                endTime: ed,
            })
        }}>
        					 <Picker.Item label="--选择预设任务方案--" value={0} />
							  <Picker.Item label="每天-早起-21天" value={7} />
							  <Picker.Item label="每天-运动30分钟-7天" value={21} />
							  <Picker.Item label="每天-跑步-7天" value={30} />
					</Picker>

						
						
					</View>
        )
        //大目标阶段页面
        var bigGoalStepPage = (
        <View style={{
            flex: 1,
            //alignItems: "center"
        }}>
        <View style ={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
            flex:1,
        }}>
				<Picker
        style={{
            backgroundColor: "#eee",
            color: "#7f7f7f",
            height: 40,
            width: 80,
            flex:1,
            margin: 5,
        }}

        mode="dropdown"
        selectedValue={this.state.frequency}
        onValueChange={(fre) => {
        		let step = this.state.step;
        		step[0].frequency = fre;
        		this.setState({
                    frequency: fre,
                    step:step
                })}}>
						  <Picker.Item label="每天" value="1" />
						  <Picker.Item label="每两天" value="2" />
						  <Picker.Item label="每三天" value="3" />
						  <Picker.Item label="每五天" value="5" />
						  <Picker.Item label="每周" value="7" />
						  <Picker.Item label="每半月" value="15" />
						  <Picker.Item label="每月" value="30" />
						</Picker>
						<TextInput
        keyboardType = "default"
        underlineColorAndroid="transparent"
        placeholder="输入目标内容"
        style={{
        	flex:1,
            height: 40,
            borderColor: '#ddd',
            borderWidth: 1,
            backgroundColor: 'white',
            width: 200,
            height: 40,
            margin: 5,
        }}
        onChangeText={(text) =>{ 
        			let t2 = this.state.t2;
        			let t3 = this.state.t3;
        			this.setState({
                    goalName: text+t2+t3,
                    t1:text
                })}}
        value={this.state.t1}
        />
        <TextInput
        keyboardType = "default"
        underlineColorAndroid="transparent"
        placeholder="(数量)"
        style={{
        	flex:1,
            height: 40,
            borderColor: '#ddd',
            borderWidth: 1,
            backgroundColor: 'white',
            width: 20,
            height: 40,
            margin: 5,
        }}
        onChangeText={(text) =>{ 
        			let t1 = this.state.t1;
        			let t3 = this.state.t3;
        			this.setState({
                    goalName: t1+text+t3,
                    t2:text,
                })}}
        value={this.state.t2}
        />
        <TextInput
        keyboardType = "default"
        underlineColorAndroid="transparent"
        placeholder=""
        style={{
        	flex:1,
            height: 40,
            borderColor: '#ddd',
            borderWidth: 1,
            backgroundColor: 'white',
            width: 20,
            height: 40,
            margin: 5,
        }}
        onChangeText={(text) =>{ 
        			let t2 = this.state.t2;
        			let t1 = this.state.t1;
        			this.setState({
                    goalName: t1+t2+text,
                    t3:text,
                })}}
        value={this.state.t3}
        />
               				
        </View>
        <View style ={{
	            flexDirection: 'row',
	            alignItems: 'center',
	            justifyContent: 'center',
	            flex:1,
	        }}>
	        <Text style ={styles.labelText}>起</Text>
					<DatePicker
				        style={{
				            height: 40,
				            width: 100,
				            margin:5,
				        }}
				        date={this.state.date}
				        showIcon={false}
				        mode="date"
				        placeholder="select date"
				        format="YYYY-MM-DD"
				        minDate={this.state.date}
				        maxDate={(this.state.strTime.getFullYear() + 1).toString() + "-" + (this.state.strTime.getMonth() + 1).toString() + "-" + this.state.strTime.getDate().toString()}
				        confirmBtnText="Confirm"
				        cancelBtnText="Cancel"
				        customStyles={{
				            dateInput: {
				                backgroundColor: "white"
				            }
				        }}
				        onDateChange={(date) => {
				            let d = date.split("-");
				            let dd = new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]));
				            let ed = new Date();
				            ed.setDate(dd.getDate() + this.state.last);
				            this.setState({
				                date: date,
				                strTime: dd,
				                endTime: ed,
				            });
				        }}
       					 />
			      		<Text style ={styles.labelText}>止</Text>
		<DatePicker
	        style={{
	            height: 40,
	            width: 100,
	            margin:5,
	        }}
	        date={(this.state.endTime.getFullYear()).toString() + "-" + (this.state.endTime.getMonth() + 1).toString() + "-" + this.state.endTime.getDate().toString()}
	        showIcon={false}
	        mode="date"
	        placeholder="select date"
	        format="YYYY-MM-DD"
	        minDate={(this.state.endTime.getFullYear()).toString() + "-" + (this.state.endTime.getMonth() + 1).toString() + "-" + this.state.endTime.getDate().toString()}
	        maxDate={(this.state.endTime.getFullYear() + 5).toString() + "-" + (this.state.endTime.getMonth() + 1).toString() + "-" + this.state.endTime.getDate().toString()}
	        confirmBtnText="Confirm"
	        cancelBtnText="Cancel"
	        customStyles={{
	            dateInput: {
	                backgroundColor: "white"
	            }
	        }}
	        onDateChange={(date) => {
	            let d = date.split("-");
	            let dd = new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]));
	            this.setState({
	                endTime: dd
	            });
	        }}
        />
				
				</View>
				 <View style ={{
	            flexDirection: 'row',
	            alignItems: 'center',
	            justifyContent: 'center',
	            flex:1,
	        }}>
				<Text style ={styles.labelText}>阶段数</Text>
				<Picker
        style={{
            backgroundColor: "#eee",
            color: "#7f7f7f",
            width: 100,
            height:40,
            margin:5,
        }}
        mode="dropdown"
        selectedValue={this.state.stepCount}
        onValueChange={(s) => {
            if (this.state.stepCount < s) {
                var step = this.state.step;
                var curDate = new Date();
                var endDate = new Date();
                endDate.setDate(curDate.getDate() + 7);
                for (var i = this.state.stepCount; i < s; i++) {
                    step.push({
                        no: i + 1,
                        last: 7,
                        goalName: '',
                        goalContent: '',
                        frequency: 1,
                        strTime: curDate,
                        endTime: endDate,
                    });
                }
            } else if (this.state.stepCount > s) {
                var step = this.state.step;
                step = step.slice(0, s);
            }
            ;

            this.setState({
                stepCount: s,
                step: step
            });
        }}>
						  <Picker.Item label="一阶段" value={1} />
						  <Picker.Item label="二阶段" value={2} />
						  <Picker.Item label="三阶段" value={3} />
						  <Picker.Item label="四阶段" value={4} />
						  <Picker.Item label="五阶段" value={5} />
						  <Picker.Item label="六阶段" value={6} />
						  <Picker.Item label="七阶段" value={7} />
						</Picker>
						</View>
						
					</View>
        )

        //小目标总结页
        var smallGoalSumPage = (
        <View style={{
            flex: 1
        }}>
					<Text style ={styles.sumText}>我的目标：{this.state.goalName}</Text>
					<Text style ={styles.sumText}>目标类型：{gType[this.state.goalType]}</Text>
					<Text style ={styles.sumText}>开始日期：{this.state.strTime.getFullYear()}年{this.state.strTime.getMonth() + 1}月{this.state.strTime.getDate()}日</Text>
					<Text style ={styles.sumText}>结束日期：{this.state.endTime.getFullYear()}年{this.state.endTime.getMonth() + 1}月{this.state.endTime.getDate()}日</Text>
					<Text style ={styles.sumText}>时长：{this.state.last}天</Text>
					<Text style ={styles.sumText}>频率：每{this.state.frequency}天一提醒</Text>
					<TouchableHighlight style={styles.strTimeBtn} onPress={this.onSummit} underlayColor="#2965fc">
		                <Text style={styles.strTimeBtnText}>
		                       完成
		                </Text>
		            </TouchableHighlight>
					</View>
        )



        var bigGoalSum = []

        for (var i in this.state.step) {

            bigGoalSum.push(
                <View key = {this.state.step[i].no} style={{
                    margin: 10
                }}>
			    		<Text style={styles.sumText2}>阶段{this.state.step[i].no}</Text>
			    		<Text style={styles.sumText2}>阶段目标 {this.state.step[i].goalName}</Text>
			    		<Text style={styles.sumText2}>阶段内容 {this.state.step[i].goalContent}</Text>
			    		<Text style={styles.sumText2}>预估时长 {this.state.step[i].last}</Text>
			    		<Text style={styles.sumText2}>开始日期 {this.state.step[i].strTime.getFullYear()}年{this.state.step[i].strTime.getMonth() + 1}月{this.state.step[i].strTime.getDate()}日</Text>
						<Text style={styles.sumText2}>结束日期 {this.state.step[i].endTime.getFullYear()}年{this.state.step[i].endTime.getMonth() + 1}月{this.state.step[i].endTime.getDate()}日</Text>
						<Text style={styles.sumText2}>频率 每{this.state.step[i].frequency}天一提醒</Text>
					</View>
            );

        }
        ;

        //大目标总结页
        var bigGoalSumPage = (
        <ScrollView style={{
            flex: 1
        }}>
					<Text style ={styles.sumText}>我的目标：{this.state.goalName}</Text>
					<Text style ={styles.sumText}>目标类型：{gType[this.state.goalType]}</Text>
					<Text style ={styles.sumText}>开始日期：{this.state.step[0].strTime.getFullYear()}年{this.state.step[0].strTime.getMonth() + 1}月{this.state.step[0].strTime.getDate()}日</Text>
					<Text style ={styles.sumText}>结束日期：{this.state.step[this.state.step.length - 1].endTime.getFullYear()}年{this.state.step[this.state.step.length - 1].endTime.getMonth() + 1}月{this.state.step[this.state.step.length - 1].endTime.getDate()}日</Text>
					<TouchableHighlight style={styles.strTimeBtn} onPress={this.onSummit} underlayColor="#2965fc">
		                <Text style={styles.strTimeBtnText}>
		                       完成
		                </Text>
		            </TouchableHighlight>
					</ScrollView>
        )

        var pages =[];
        pages.push(
            <View style ={styles.newGoalBody}>
            <Text style ={styles.goalText}>新建目标</Text>
            <View style={{
                flex: 1
            }}>
            <Text style ={styles.labelText}>目标大小</Text>
                <Picker
            style={{
                backgroundColor: "#eee",
                color: "#7f7f7f",
                width: 200
            }}
            mode="dropdown"
            selectedValue={this.state.goalSize}
            onValueChange={(goalS) => {
                this.setState({
                    goalSize: goalS
                });console.log(this.state.step);
            }}>
                  <Picker.Item label="小目标" value="small" />
                  <Picker.Item label="老大不小目标" value="big" />
                </Picker>
            <Text style ={styles.labelText}>目标分类</Text>
            <Picker
            style={{
                backgroundColor: "#eee",
                color: "#7f7f7f"
            }}
            mode="dropdown"
            selectedValue={this.state.goalType}
            onValueChange={(goalT) => this.setState({
                goalType: goalT
            })}>
                  <Picker.Item label="健康" value="health" />
                  <Picker.Item label="学习" value="study" />
                  <Picker.Item label="金钱" value="money" />
                </Picker>
            </View>
            <Text style ={styles.goalText}>1/3</Text>
        </View>);
        if (this.state.goalSize === "small") 
        {
            pages.push(
                    <View style ={styles.newGoalBody}>
            <Text style ={styles.goalText}>小目标</Text>
            <Text style ={styles.subText}>-{gType[this.state.goalType]}生活-</Text>
            {smallGoalStepPage}
            <Text style ={styles.goalText}>2/3</Text>
            </View>
                );
            pages.push(
            <View style ={styles.newGoalBody}>
            <Text style ={styles.goalText}>新建目标</Text>
            {smallGoalSumPage}
            <Text style ={styles.goalText}>3/3</Text>
        </View>
                );
            pages.push(
                <View style ={styles.newGoalBody}>
            <Text style ={styles.goalText}>大目标</Text>
            <Text style ={styles.subText}>-{gType[this.state.goalType]}生活-</Text>
            {bigGoalStepPage}
            <Text style ={styles.goalText}>3/4</Text>
            </View>
            )
        }
        else 
        {
            pages.push(
                <View style ={styles.newGoalBody}>
            <Text style ={styles.goalText}>大目标</Text>
            <Text style ={styles.subText}>-{gType[this.state.goalType]}生活-</Text>
            {bigGoalStepPage}
            <Text style ={styles.goalText}>3/4</Text>
            </View>
            )

            pages.push(
                <View style ={styles.newGoalBody}>
            <Text style ={styles.goalText}>大目标</Text>
            <Text style ={styles.subText}>-{gType[this.state.goalType]}生活-</Text>
            <FlatList style={{
            marginTop: 20,
        }}
        data ={this.state.step}
        renderItem = {this.renderItem.bind(this)}
        keyExtractor={this._keyExtractor}
        />
            <Text style ={styles.goalText}>3/4</Text>
            </View>
            )

            pages.push(
            <View style ={styles.newGoalBody}>
            <Text style ={styles.goalText}>新建目标</Text>
            {bigGoalSumPage}
            <Text style ={styles.goalText}>4/4</Text>
        </View>
                )
        }
        



        return (
            <ViewPagerAndroid style={{
                flex: 1
            }} initialPage={0}
            keyboardDismissMode = "on-drag"
            >
        {pages}
		</ViewPagerAndroid>
        )
    }


    _keyExtractor = (item, index) => item.no;

    ListHeaderComponent() {}

    renderItem({item, index}) {
        console.log(item);
        return (
            <View style={{
                margin: 20,
                alignItems: "center"
            }}>
        		<Text style={styles.labelText}>阶段{item.no}</Text>
        		<Text style ={styles.labelText2}>阶段目标</Text>
					<TextInput
            keyboardType = "default"
            underlineColorAndroid="transparent"
            style={{
                height: 40,
                borderColor: '#ddd',
                borderWidth: 1,
                backgroundColor: 'white',
                width: 300,
            }}
            onChangeText={(text) => {
                step = this.state.step;
                step[index].goalName = text;
                this.setState({
                    step: step
                })
            }}
            value={this.state.step[index].goalName}
            />
		        <Text style ={styles.labelText2}>阶段内容</Text>
					<TextInput
            keyboardType = "default"
            underlineColorAndroid="transparent"
            style={{
                height: 40,
                borderColor: '#ddd',
                borderWidth: 1,
                backgroundColor: 'white',
                width: 300,
            }}
            onChangeText={(text) => {
                step = this.state.step;
                step[index].goalContent = text;
                this.setState({
                    step: step
                })
            }}
            value={this.state.step[index].goalContent}
            />
				<Text style={styles.labelText2}>持续时长</Text>
				<Picker
            style={{
                backgroundColor: "#eee",
                color: "#7f7f7f",
                width: 200
            }}
            mode="dropdown"
            selectedValue={item.last}
            onValueChange={(l) => {
                let step = this.state.step;
                let ed = new Date();
                ed.setDate(step[index].strTime.getDate() + l);
                step[index].last = l;
                step[index].endTime = ed,
                this.setState({
                    step: step
                })
            }}>
						  <Picker.Item label="一周" value={7} />
						  <Picker.Item label="21天" value={21} />
						  <Picker.Item label="一月" value={30} />
						  <Picker.Item label="三个月" value={90} />
						  <Picker.Item label="一年" value={365} />
						  <Picker.Item label="两年" value={730} />
						  <Picker.Item label="三年" value={1095} />
					</Picker>
				<Text style ={styles.labelText2}>阶段开始时间</Text>
					<DatePicker
            style={{
                height: 40,
                width: 200
            }}
            date={item.strTime.getFullYear().toString() + "-" + (item.strTime.getMonth() + 1).toString() + "-" + item.strTime.getDate().toString()}
            showIcon={false}
            mode="date"
            placeholder="select date"
            format="YYYY-MM-DD"
            minDate={this.state.date}
            maxDate={(this.state.strTime.getFullYear() + 1).toString() + "-" + (this.state.strTime.getMonth() + 1).toString() + "-" + this.state.strTime.getDate().toString()}
            confirmBtnText="Confirm"
            cancelBtnText="Cancel"
            customStyles={{
                dateInput: {
                    backgroundColor: "white"
                }
            }}
            onDateChange={(date) => {
                let d = date.split("-");
                let step = this.state.step;
                step[index].strTime = new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]));
                step[index].endTime = new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]));
                step[index].endTime.setDate(step[index].endTime.getDate() + step[index].last);
                this.setState({
                    step: step
                });
            }}
            />
		      		<Text style ={styles.labelText2}>阶段结束时间</Text>
		      		<DatePicker
            style={{
                height: 40,
                width: 200
            }}
            date={(item.endTime.getFullYear()).toString() + "-" + (item.endTime.getMonth() + 1).toString() + "-" + item.endTime.getDate().toString()}
            showIcon={false}
            mode="date"
            placeholder="select date"
            format="YYYY-MM-DD"
            minDate={(item.endTime.getFullYear()).toString() + "-" + (item.endTime.getMonth() + 1).toString() + "-" + item.endTime.getDate().toString()}
            maxDate={(item.endTime.getFullYear() + 5).toString() + "-" + (item.endTime.getMonth() + 1).toString() + "-" + item.endTime.getDate().toString()}
            confirmBtnText="Confirm"
            cancelBtnText="Cancel"
            customStyles={{
                dateInput: {
                    backgroundColor: "white"
                }
            }}
            onDateChange={(date) => {
                let d = date.split("-");
                let step = this.state.step;
                step[index].endTime = new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]));
                this.setState({
                    step: step
                });
            }}
            />
		      		<Text style ={styles.labelText2}>频率</Text>
						<Picker
            style={{
                backgroundColor: "#eee",
                color: "#7f7f7f",
                width: 200
            }}
            mode="dropdown"
            selectedValue={item.frequency}
            onValueChange={(fre) => {
                let step = this.state.step;
                step[index].frequency = fre;
                this.setState({
                    step: step
                });
            }}>
						  <Picker.Item label="每天" value="1" />
						  <Picker.Item label="两天一次" value="2" />
						  <Picker.Item label="三天一次" value="3" />
						  <Picker.Item label="五天一次" value="5" />
						  <Picker.Item label="每周一次" value="7" />
						  <Picker.Item label="半月一次" value="15" />
						  <Picker.Item label="每月一次" value="30" />
						</Picker>
			</View>
        )
    }
    //绘制列表的分割线
    renderItemSeparator() {}


}

export default NewGoalScreen;

const gType = {
    "health": "健康",
    "money": "金钱",
    "study": "学习",
};

const styles = StyleSheet.create({
    newGoalBody: {
        alignItems: 'center',
        backgroundColor: '#2196F7',
    },
    goalText: {
        color: 'white',
        fontSize: 28,
        margin: 30,
        marginBottom: 5,
    },
    subText: {
        color: 'white',
        fontSize: 18,
        margin: 5,
        marginBottom: 30,
    },
    strTimeBtn: {
        height: 40,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white'
    },
    helpBtn: {
        margin: 10,
        height: 40,
        width: 40,
        borderRadius: 20,
        alignSelf: 'center',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white'
    },
    strTimeBtnText: {
        color: '#7f7f7f',
        fontSize: 15,
    },
    labelText: {
        alignSelf: 'center',
        color: 'white',
        fontSize: 20,
        marginTop: 35,
        marginBottom: 25,
    },
    labelText2: {
        alignSelf: 'center',
        color: 'white',
        fontSize: 15,
        marginTop: 20,
        marginBottom: 15,
    },
    sumText: {
        alignSelf: 'flex-start',
        color: 'white',
        fontSize: 20,
        margin: 10,
    },
    sumText2: {
        alignSelf: 'flex-start',
        color: 'white',
        margin: 2,
    }
});

